<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.4 CSS3仿天猫类别过渡效果制作</title>
    <style>
        .main{
            width: 260px;
            height: 270px;
            border:1px solid #ccc;
            margin: 50px auto;
            font-family: 'Microsoft YaHei';
            cursor: pointer;
        }

        .main img{
            width: 180px;
            position: absolute;
            top:0px;
            right: 0px;
            transition: all .2s;
        }

        .main:hover img{
            right: 15px;

        }
        .m_title{
            text-align: left;
            font-weight: bold;
            font-size: 20px;
            padding: 20px 10px 10px 10px;
        }

        .m_content{
            color:#11ccaa;
        }

        .m_img{
            text-align: right;
            position: relative;
        }

    </style>
</head>
<body>
   <div class="main">
       <div class="m_title">好车特卖一口价</div>
             <div class="m_content">新年，新车开回家</div>
       
        <div class="m_img">
            <img src="./img/003.png" alt="新车特卖">
        </div>

   </div>
</body>
</html>